<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <script src="/static/js/jquery.min.js"></script>
    <link href="/static/favicon.ico" rel="shortcut icon">
</head>
<body>
<input type="button" value="选择" id="select">
<input type="file" multiple="multiple" id="inputFile" style="display: none;">
<input type="button" value="上传" id="send">
<div class="img_content"></div>
<button id="list">getList</button>

<script>
    $('#list').click(function() {
        $.get('/api/list', function(res) {
            console.log(res)
        }, 'json')
    })
    $('#select').click(function() {
        var $dom = $('#inputFile')
        $dom.trigger('click')
    })
    $('#send').on('click', function(event) {
        var formData = new FormData()
        for (var i in $('#inputFile')[0].files) {
           formData.append('file', $('#inputFile')[0].files[i])
        }
        $.ajax({
            url: '/upload',
            type: 'post',
            dataType: 'json',
            data: formData,
            cache: false,
            processData: false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
            contentType: false, // 不设置Content-type请求头
            success: function (res) {
                console.log('res', res)
                if (res.code === 200) {
                    insertImage(res.data.urls)
                }
            },
           error: function (e) {
                console.log('err', e)
            }
        })
    })
    function insertImage(urls) {
        var str = ''
        for (var i in urls) {
            str += '<img src="' + urls[i] + '" alt="" style="width: 100px;height: 100px;">'
        }
        $('.img_content')[0].innerHTML = ''
        $('.img_content').append(str)
    }
</script>
</body>
</html>